<template>
  <div>

    <item-title title="终端产品信息" />

    <el-form
      :inline="true"
      label-position="right"
      label-width="130px"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="终端名称:">
            <el-link
              type="primary"
              :underline="false"
              @click="onTerminal"
            >{{ datas.terminalName }}</el-link>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="终端类型:">
            {{ getLabel('app_mode',datas.terminalType) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="所在地区:">
            {{ datas.provinceName }}/{{ datas.cityName }}/{{ datas.areaName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="产品通用名:">
            {{ datas.productPopularName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商品名:">
            {{ datas.productName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="包装规格:">
            {{ datas.packSpecs }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="终端价:">
            <el-link
              type="primary"
              :underline="false"
              @click="onPrice"
            >{{ datas.terminalPrice }}元/{{getLabel('sell_unit',datas.sellUnit)}}</el-link>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="代理名称:">
            {{ datas.agentName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="交易价:">
            {{ datas.tradePrice }}元/{{getLabel('sell_unit',datas.sellUnit)}}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员:">
            {{ datas.headName }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="配送商信息" />

    <distributor-table
      :unit="datas?.sellUnit"
      :list="datas.distributeContractDetails"
    />

    <item-title
      title="修改记录"
      style="margin-top: 20px"
    />

    <operation-view
      :id="datas.devId"
      mode="dev"
    />

    <!-- 产品终端价详情 -->
    <detail-drawer
      ref="detailDrawer"
      :size-width="1000"
      custom-title
    >
      <template #title>
        <span>产品终端价 - {{ datas.priceNumber }}</span>
      </template>
      <template #contents>

        <terminalPrice :id="datas.productPriceId" />

      </template>
    </detail-drawer>

    <detail-drawer
      ref="terminalDrawer"
      :size-width="1000"
      custom-title
    >
      <template #title>
        <span>终端 - {{ datas.terminalName }}</span>
      </template>
      <template #contents>

        <terminalInfo :id="datas.terminalId" />

      </template>
    </detail-drawer>

  </div>
</template>

<script>

import {defineAsyncComponent, defineComponent, inject, onMounted, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'TerAndDisDetail',
  components: {
    terminalPrice: defineAsyncComponent(
            () => import('../../commonView/detailComponents/product/terminalPrice.vue')
    ),
    terminalInfo : defineAsyncComponent(
            () => import('../../commonView/detailComponents/terminal/terminalInfo.vue')
    )
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, {}) {
    const api = inject('api')
    var data = reactive({
      datas: [],
      detailDrawer: null,
      terminalDrawer: null,
    })

    const onPrice = () => {
      data.detailDrawer.open()
    }

    const onTerminal = () => {
      data.terminalDrawer.open()
    }

    onMounted(() => {
      api.terminal.PRODUCT_DETAILS(props.id).then((res) => {
        if (res.code === 0) {
          data.datas = res.data
        }
      })
    })

    return {
      ...toRefs(data),

      onPrice,
      onTerminal,
    }
  },
})
</script>

<style scoped>
</style>
